import React, { Component } from 'react';
import axios from 'axios';
class View extends Component {
    constructor(props){
        super(props)
        // this.alertTip = this.alertTip.bind(this);
        this.state = {
            current:1,
            current1:1,
            current2:1,
            newDeatail:[]
        }
    }
    box(){
        // console.log('这又是一个点击事件')
    }
    alertTip(e){
    // alertTip = () =>{
        e.stopPropagation();
        console.log('这是一个点击事件');
    }
    async getApi(url,cfg,headers){
        let	data = await axios.get(url,{params:cfg},
        {
            headers: headers
        })
        return data;
    }
    getHome(id){
        const cfg = {
            page_number:id,
            page_size:'10'
        };
        this.getApi('/home/mediareports',cfg,{}).then((res)=>{
            this.setState({
                newDeatail:res.data.data,
            })
        })
    }
    tabFn(e,id){
        this.setState({
            current:id
        })
        // 内容填充
        this.getHome(id)
    }
    tabFn1(e,id){
        this.setState({
            current1:id
        })
    }
    tabBtn(index){
        return index === this.state.current2 ? 'cur' : '';
    }
    tabCon(index){
        return index === this.state.current2 ? 'tab_con_li current' : 'tab_con_li';
    }
    /**
        1、事件的书写与className类似，驼峰形式
        2、直接传入事件名称 this.alertTip onClick={this.alertTip}
        3、阻止默认形为 需要使用e.preventDefault()
        4、e.stopPropagation();
        5、this 邦定的三种写法
            1、alertTip(){} 需在要constructor 中添加bind 邦定
            2、直接用es6 箭头函数  alertTip = () =>{}
            3、onClick={()=>this.alertTip()}
        6、事件传参
            <button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
            <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
        7、tab;
            按钮不同，对应div 内容模块相同
            比如新闻
            作业：把按钮写成for 循环形式
    **/
    componentDidMount(){
        this.getHome(1);
    }
    render(){
        const listData = this.state.newDeatail.map((val)=>(
            <li className="clearfix" key={val.id}>
                <span className="fr">{val.sourceDate}</span>
                <span className="fr">{val.source}</span>
                <a href={val.jump_url} key={val.id} title={val.main_title}>
                    {val.main_title}
                </a>
            </li>
        ));
        return(
            <div className="event" onClick={this.box}>
                <h2>这是事件页面</h2>
                <a href="###" onClick={(e)=>this.alertTip(e)}>点我</a>
                <div className="tab_box">
                    <ul>
                        <li onClick={(e)=>{this.tabFn(e,1)}} className={this.state.current===1?'cur':''}>最新新闻</li>
                        <li onClick={(e)=>{this.tabFn(e,2)}} className={this.state.current===2?'cur':''}>科技资讯</li>
                        <li onClick={(e)=>{this.tabFn(e,3)}} className={this.state.current===3?'cur':''}>行业动态</li>
                    </ul>
                    <div className="tab_con">
                        <div className="tab_con_li current">
                            <ol>
                                {listData}
                            </ol>
                        </div>
                    </div>
                </div>
                <div className="tab_box">
                    <ul>
                        <li onClick={(e)=>{this.tabFn1(e,1)}} className={this.state.current1===1?'cur':''}>按钮一</li>
                        <li onClick={(e)=>{this.tabFn1(e,2)}} className={this.state.current1===2?'cur':''}>按钮二</li>
                        <li onClick={(e)=>{this.tabFn1(e,3)}} className={this.state.current1===3?'cur':''}>按钮三</li>
                    </ul>
                    <div className="tab_con">
                        <div className={this.state.current1===1?'tab_con_li current':'tab_con_li'}>第一块内容</div>
                        <div className={this.state.current1===2?'tab_con_li current':'tab_con_li'}>第二块内容</div>
                        <div className={this.state.current1===3?'tab_con_li current':'tab_con_li'}>第三块内容</div>
                    </div>
                </div>
                <div className="tab_box">
                    <ul>
                        <li onClick={()=>this.setState({current2:1})} className={this.tabBtn(1)}>按钮一</li>
                        <li onClick={()=>this.setState({current2:2})} className={this.tabBtn(2)}>按钮二</li>
                        <li onClick={()=>this.setState({current2:3})} className={this.tabBtn(3)}>按钮三</li>
                    </ul>
                    <div className="tab_con">
                        <div className={this.tabCon(1)}>第一块内容</div>
                        <div className={this.tabCon(2)}>第二块内容</div>
                        <div className={this.tabCon(3)}>第三块内容</div>
                    </div>
                </div>
            </div>
        )
    }

}

export default View;
